<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Grid</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>

</script>
<style>
.div_first, .div_twice{
	text-align: center;
	padding: 5px;
}
</style>
</head>
<body>

<div data-role='page' id="gridMain">
	<div data-role="header" data-position="fixed"><h1>Layout Grid</h1>
		<a href="index.jsp" data-role="button" class="ui-btn-right" data-icon="home">HOME</a>
	</div>
	
	<div data-role="content">
		<h3>2행 2열</h3>
		<div class="ui-grid-a">
			<div class="ui-block-a div_first">첫번째행 첫열</div>
			<div class="ui-block-b div_twice">첫번째행 두번째열</div>
			
			<div class="ui-block-a div_first">첫번째행 첫열</div>
			<div class="ui-block-b div_twice">첫번째행 두번째열</div>
		</div>
		<br/><br/>
		
		<h3>패딩지정</h3>
		<div class="ui-grid-a ui-bar ui-bar-a">
			<div class="ui-block-a div_first">첫번째행 첫열</div>
			<div class="ui-block-b div_twice">첫번째행 두번째열</div>
			
			<div class="ui-block-a div_first">첫번째행 첫열</div>
			<div class="ui-block-b div_twice">첫번째행 두번째열</div>
		</div>
		<br/><br/>
		
		<h3>열별 테마지정</h3>
		<div class="ui-grid-a ui-bar-c">
			<div class="ui-block-a div_first ui-bar-a">첫번째행 첫열</div>
			<div class="ui-block-b div_twice ui-bar-b">첫번째행 두번째열</div>
			
			<div class="ui-block-a div_first ui-bar-c">첫번째행 첫열</div>
			<div class="ui-block-b div_twice ui-bar-d">첫번째행 두번째열</div>
		</div>
		<br/><br/>
		
		<h3>회원 목록</h3>
		<div class="ui-grid-c ui-bar-c">
			<!-- 목록자리 -->
			<div class="ui-block-a div_first ui-bar-a">순번</div>
			<div class="ui-block-b div_first ui-bar-a">아이디</div>
			<div class="ui-block-c div_first ui-bar-a">성명</div>
			<div class="ui-block-d div_first ui-bar-a">연락처</div>
			
			<div class="ui-block-a div_first ui-bar-d">순번1</div>
			<div class="ui-block-b div_first ui-bar-d">아이디1</div>
			<div class="ui-block-c div_first ui-bar-d">성명1</div>
			<div class="ui-block-d div_first ui-bar-d">연락처1</div>
			
			<div class="ui-block-a div_first ui-bar-d">순번2</div>
			<div class="ui-block-b div_first ui-bar-d">아이디2</div>
			<div class="ui-block-c div_first ui-bar-d">성명2</div>
			<div class="ui-block-d div_first ui-bar-d">연락처2</div>
			
			<div class="ui-block-a div_first ui-bar-d">순번</div>
			<div class="ui-block-b div_first ui-bar-d">아이디</div>
			<div class="ui-block-c div_first ui-bar-d">성명</div>
			<div class="ui-block-d div_first ui-bar-d">연락처</div>
		</div>
		
	</div>
	
	
	<div data-role="footer" data-position="fixed"><h1>Footer</h1></div>

</div>

</body>
</html>